@extends('backend.layouts.base')
@section('title', '授权信息设置')
@section('content')
    <script src="/static/js/industry.js"></script>

    <div class="all">
        <div id="app" v-cloak>
            <template>
                <div class="vue-head">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">系统授权</div>
                    </div>
                    <div style="width:996px;">
                        <el-form ref="form" :model="form" label-width="20%" class="demo-ruleForm" v-show="page=='auth'">
                            <el-form-item label="key" prop="key">
                                <el-input v-model="key" placeholder="请输入key" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="密钥" prop="secret">
                                <el-input v-model="secret" placeholder="请输入密钥" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click.native="tapclickPas" >重置密钥</el-button>
                            </el-form-item>
                        </el-form><!--auth end-->

                        <el-form ref="form" :model="form" :rules="rules" label-width="20%" class="demo-ruleForm" v-show="page=='free'">
                            <el-form-item label="公司名称" prop="name">
                                <el-input v-model="form.name" placeholder="请输入公司名称" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="行业" prop="trades">
                                <el-select v-model="form.trades" value-key="id" style="width:100%" placeholder="请选择行业">
                                    <el-option v-for="item in opt_trades.data"
                                               :key="item.id"
                                               :label="item.name"
                                               :value="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所在区域" required>
                                <el-col :span="4">
                                    <el-form-item prop="province">
                                        <el-select v-model="form.province" value-key="id" placeholder="省" @change="change_province">
                                            <el-option v-for="item in opt_province"
                                                       :key="item.id"
                                                       :label="item.name"
                                                       :value="item">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col style="text-align: center" :span="1">-</el-col>
                                <el-col :span="4">
                                    <el-form-item prop="city">
                                        <el-select v-model="form.city" value-key="id" placeholder="市" @change="change_city">
                                            <el-option v-for="item in opt_city"
                                                       :key="item.id"
                                                       :label="item.name"
                                                       :value="item">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col style="text-align: center" :span="1">-</el-col>
                                <el-col :span="4">
                                    <el-form-item prop="area">
                                        <el-select v-model="form.area" value-key="id" placeholder="区">
                                            <el-option v-for="item in opt_area"
                                                       :key="item.id"
                                                       :label="item.name"
                                                       :value="item">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="详细地址" prop="address">
                                <el-input v-model="form.address" placeholder="请输入详细地址" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="captcha">
                                <el-input v-model="form.captcha" style="width:150px" placeholder="请输入验证码"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="mobile">
                                <el-input placeholder="请输入手机号" v-model="form.mobile" style="width:200px" autocomplete="off"></el-input>
                                <el-button type="info" @click="sendSms()" style="width:150px; margin-left: 50px" plain :disabled="isDisabled">[[captcha_text]]</el-button>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click.native.prevent="onSubmit" :disabled="formLoading">提交</el-button>
                            </el-form-item>
                        </el-form><!--free end-->
                    </div>
                </div>
            </template>
        </div>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'settingSite',
            data() {
                var validateMobile = (rule, value, callback) => {
                    if (!(/^1\d{10}$/.test(value))) {
                        callback(new Error('手机号格式不正确'));
                    } else {
                        callback();
                    }
                };
                return{
                    page: '',
                    form: {
                        name: '',
                        trades: '',
                        province: '',
                        city: '',
                        area: '',
                        address: '',
                        mobile: '',
                        captcha: ''
                    },
                    key: '',
                    secret: '',
                    btn: '',
                    opt_trades: industry,
                    opt_province: [],
                    opt_city:[],
                    opt_area:[],
                    t: 6,
                    captcha_text: '获取验证码',
                    isDisabled: false,
                    formLoading: false,
                    rules: {
                        name: [
                            { required: true, message: '请输入公司名称', trigger: 'blur' }
                        ],
                        trades: [
                            { required: true, message: '请选择行业', trigger: 'change' }
                        ],
                        province: [
                            { required: true, message: '请选择省', trigger: 'change' }
                        ],
                        city: [
                            { required: true, message: '请选择市', trigger: 'change' }
                        ],
                        area: [
                            { required: true, message: '请选择区', trigger: 'change' }
                        ],
                        address: [
                            { required: true, message: '请输入详情地址', trigger: 'blur' }
                        ],
                        mobile: [
                            { required: true, message: '请输入手机号', trigger: 'blur' },
                            { validator: validateMobile, trigger: 'blur' }
                        ],
                        captcha: [
                            { required: true, message: '请输入验证码', trigger: 'blur' }
                        ]
                    }
                }
            },
            watch: {
                'form.province': function (newValue, oldValue) {
                    this.form.city = null
                    this.opt_city = [{id:0,name:'请选择'}];
                    this.form.area = null
                    this.opt_area = [{id:0,name:'请选择'}];
                },
                'form.city': function (newValue, oldValue) {
                    this.form.area = null
                    this.opt_area = [{id:0,name:'请选择'}];
                }
            },
            created() {
            },
            mounted() {
                this.getProvince();
                this.getData();
            },
            methods: {
                getData() {
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('sys.setting.authInfo') !!}',{}).then(function (response) {
                            if (response.data.result){
                                if(response.data.data.setting){
                                    this.key = response.data.data.setting.key;
                                    this.secret = response.data.data.setting.secret;
                                }
                                this.page = response.data.data.page
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },
                sendSms:function () {
                    let that = this;
                    let rTime = that.t;

                    if (!(/^1\d{10}$/.test(this.form.mobile))) {
                        this.$refs.form.validateField('mobile');
                        return false;
                    }

                    // 倒计时
                    let interval = window.setInterval(() => {
                        if (--that.t <= 0) {
                            that.t = rTime;
                            that.isDisabled = false;
                            that.captcha_text = '获取验证码';

                            window.clearInterval(interval);
                        } else {
                            that.isDisabled = true;
                            that.captcha_text = '(' + that.t + 's)后重新获取';
                        }
                    }, 1000);

                    that.$http.post("{!! absolute_admin_url('sys.setting.sendSms') !!}", {'mobile': this.form.mobile}).then(response => {

                        if (response.data.result) {
                            this.$message({
                                message: response.data.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '未获取到数据',
                                type: 'error'
                            });
                        }

                    }, response => {
                        console.log(response);
                    });
                },
                getProvince(){
                    this.$http.post('{!! absolute_admin_url('common.area.getProvinceList') !!}',{}).then(function (response) {
                            if (response.data.result){
                                this.opt_province = response.data.data;
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    );
                },
                change_province: function (item) {
                    let that = this;
                    that.$http.post("{!! absolute_admin_url('common.area.getCity') !!}", {'pid': item}).then(response => {

                        if (response.data.result) {
                            that.opt_city = response.data.data;
                        } else {
                            this.$message({
                                message: '未获取到数据',
                                type: 'error'
                            });
                        }
                    }, response => {
                        console.log(response);
                    });
                },
                change_city: function (item) {
                    let that = this;
                    that.$http.post("{!! absolute_admin_url('common.area.getDistrict') !!}", {'pid': item}).then(response => {
                        if (response.data.result) {
                            that.opt_area = response.data.data;
                        } else {
                            this.$message({
                                message: '未获取到数据',
                                type: 'error'
                            });
                        }
                    }, response => {
                        console.log(response);
                    });
                },
                onSubmit: function () {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            const loading = this.$loading({
                                lock: true,
                                text: '努力注册中',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });

                            this.$http.post("{!! absolute_admin_url('sys.setting.authRegister') !!}", {'data': this.form}).then(response => {
                                loading.close();

                                if (response.data.result) {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                    window.location = response.data.data.url;
                                } else {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'error'
                                    });
                                }
                            }, response => {
                                loading.close();
                                console.log(response);
                            });
                        } else {
                            return false;
                        }
                    });
                },
                tapclickPas(){
                    let data={
                        key:this.key,
                        secret:this.secret
                    }

                    this.$http.post("{!! absolute_admin_url('sys.setting.resetAuth') !!}", {'data': data}).then(res => {
                        res=res.body
                        if (res.result==1) {
                            this.key = res.data.key;
                            this.secret = res.data.secret
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                        }
                    })
                }
            },
        })

    </script>
@endsection
